<template>
    <section class="active-share-pop-box" v-if="isActive">
      <div class="content absolute-center bgcFFF">
        <img class="title-img pa" src="../assets/img/img_share_pop_title.png" alt="">
        <div class="title-text fs16 text-c color7E82F6">
          <p>你可获得</p>
          <p>9.9元购买特权</p>
        </div>
        <p class="details fs12 text-c">
          分享“感恩有礼”文章至微信朋友圈即可获得此商品9.9元购买特权，限购一件
        </p>
        <p class="btn-operation">
          <span class="base-btn" @click="handleOperation">去分享</span>
        </p>
        <p class="btn-close text-c color7A7B82 fs14">
          <span @click="handleClose">我知道了</span>
        </p>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['isActive'],
    methods: {
      handleOperation(){
        this.$emit('handle-operation')
      },
      handleClose(){
        this.$emit('close')
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base.scss';

  .active-share-pop-box{
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;

    .content{
      width: 270px;
      height:auto;
      border-radius: 12px;
      padding:0 25px;
      box-sizing: border-box;

      .title-img{
        width: 84%;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
      }

      .title-text{
        margin-top: 52px;

        p{
          line-height: 22px;
        }
      }

      .details{
        line-height: 20px;
        color: #646488;
        margin-top: 8px;
      }

      .btn-operation{
        margin-top: 20px;
      }

      .btn-close{
        line-height: 40px;
        margin: 5px 0 10px;
      }
    }
  }
</style>
